<template>
	<view class="pagebox">
   
        <uni-card :is-shadow="true" v-for="(item,index) in lists" :key="index">
           <view slot="title" class="title">
               <view class="user">
                   <image class="headimg" :src="item.user.str_headimg" mode=""></image>
                   <view class="usertime">
                       <view class="v1">{{item.user.username}}</view>
                       <view class="v2">{{item.add_time}}</view>
                   </view>
               </view>
               
               <view class="action" >
                   <view class="edit btn"  @click="todesc(item)">详情</view>
                   <view class="del btn"  v-if="item.edit"  @click="del(item.id,index)">删除</view>
<!--                   <uni-icons type="trash" size="24" color="#e43d33"></uni-icons> -->
               </view>
           </view>
           <view class="content"> 
               <view class="text">
                   <view class="bold">{{item.title}}</view>
                   <view>品牌客户：{{item.client_name}}</view>
                   <view>今日完成工作：{{item.todayend}}</view>
                   <view>未完成工作：{{item.notend}}</view>
                   <view>需协调工作：{{item.needhelp}}</view>
               </view>
               <view class="img" @click="showimg(item.images)" v-if="item.images.length>=1">
                   <image :src="item.images[0]" mode="widthFix"></image>
               </view>
           </view>
        </uni-card>
        <view class="more">
            <template v-if="page<last_page">
                加载更多~
            </template>    
            <template v-else>
                没有更多了~
            </template>
        </view> 
        <Dailymenu v-if="role_id!=1"></Dailymenu>
        <tabbar current="keep" v-if="role_id == 1"></tabbar>
	</view>
</template>

<script>
import Dailymenu from '@/components/menu/keep.vue'
import tabbar from "@/components/tabbar.vue"    
export default{
    name:"daily",
    components:{
      tabbar,Dailymenu  
    },
    data(){
        return{
            nav:0,
            lists:[],
            page:1,
            last_page:1,
            role_id:'',
        }
    },
    onPullDownRefresh(){
        this.page = 1
        this.lists = []
        var _this = this
        setTimeout(function () {
            uni.stopPullDownRefresh();
            _this.getlists()
        }, 500);
    },
    onReachBottom(){
        if(this.page<this.last_page){
            this.page ++ 
            this.getlists()
        }
    },
    onLoad(){
      this.page = 1
      this.lists = []  

      this.getlists()
      this.role_id = uni.getStorageSync('nantong_role_id');
      console.log("this.role_id",this.role_id)
    },
 
    methods:{
        todesc(item){
            if(item.edit){
                this.$navto(`/pages/sales/keeppost?id=`+item.id)
            }else{
                this.$navto(`/pages/sales/keepdes?id=`+item.id)
            }
            
        },
        del(id,index){
            this.$confirm('是否确认删除？').then(()=>{
                this.$api.post(`keep/del`,{id:id}).then(()=>{
                    this.lists.splice(index,1)
                })
            })
        },
        getlists(){
            this.$api.get(`keep/lists?page=${this.page}`).then(({data})=>{
                this.lists = this.lists.concat(data.data)
                this.last_page  = data.last_page
            })
        },
        showimg(data){
            uni.previewImage({
                urls:data
            })
        }
    }
}
</script>

<style lang="less" scoped>
	.pagebox{
        .title{
            height: 120rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .user{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .headimg{
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 10rpx;
                }
                .usertime{
                    margin-left: 25rpx;
                    .v1{
                        font-size: 28rpx;
                        font-weight: bold;
                    }
                    .v2{
                        font-size: 24rpx;
                        color: #c7c9ce;
                    }            
                }
            }
            
           .action{
               height: 100%;
               padding-top: 60rpx;
               display: flex;
               .btn{
                   width: 80rpx;
                   border-radius: 10rpx;
                   color: #fff;
                   font-size: 24rpx;
                   display: inline-block;
                   height: 50rpx;
                   line-height: 50rpx;
                   text-align: center;
               }
               .edit{
                   background-color: #52A0F3;
               }
               .del{
                   background-color: #e43d33;
                   margin-left: 10rpx;
               }
           } 
        }
            
        .content{
            display: flex;
            justify-content: space-between;
            .text{
                font-size: 24rpx;
            }
            .img{
                width: 150rpx;
                height: 150rpx;
                overflow: hidden;
                image{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>
